<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2023-03-10 15:29:40
 * @LastEditors: Andy
 * @LastEditTime: 2023-04-06 16:47:57
-->
<template>
  <div class="audit-state-content">
    <x-state-page
      :state="auditInfo.auditState === 3 ? 'error' : 'success'"
      :title="auditDescription[auditInfo.auditState]?.title ?? ''"
      :isShowBtn="false"
      style="margin-bottom: 50px"
    >
      <template slot="subTitle">
        <div class="flex-row">
          {{
            auditInfo.auditState === 3 ? auditInfo.auditRemark : auditDescription[auditInfo.auditState]?.subTitle ?? ''
          }}
          <el-link
            style="margin-left: 5px"
            type="warning"
            v-if="auditInfo.auditState === 3"
            :underline="false"
            @click="handleEditInfo"
            >去修改</el-link
          >
        </div>
      </template>
      <template slot="excess">
        <div class="audit-supplier-info flex-row flex-between">
          <label>供应商名称：{{ auditInfo.fullName }}</label>
          <label>提交时间:{{ auditInfo.updateTime }}</label>
          <label>状态:{{ selectDictLabel(dictOptions['srm_supplier_info.audit_state'], auditInfo.auditState) }}</label>
        </div>
      </template>
    </x-state-page>
  </div>
</template>
<script>
  import { selectDictLabel } from '@package/utils'
  import { auditDescription } from '../config/certification'

  export default {
    name: 'AuditState',
    props: {
      auditInfo: {
        type: Object
      },
      dictOptions: {
        type: Object
      }
    },
    data() {
      return {
        auditDescription
      }
    },
    watch: {
      auditInfo: {
        handler(val) {
          // console.log(this.auditInfo, 'llll')
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      selectDictLabel,
      handleEditInfo() {
        this.$emit('handleEdit')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .audit-state-content {
    background-color: #fff;
    height: 100%;
    .state-content {
      margin-top: 8%;
    }
    .audit-supplier-info {
      box-sizing: border-box;
      /* padding: 40px 30%; */
      align-items: center;
      text-align: center;
      color: #666;
      label {
        margin-right: 120px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
  ::v-deep i.el-alert__icon.el-icon-error.is-big {
    top: -16px;
  }
</style>
